<template>
  <!--todo:期刊-->
  <div>
    <navigator-menu></navigator-menu>

    <el-card shadow="always" style="border-radius: 35px 15px; height: 75vh; margin: 10vw;opacity: 0.95">
        <el-card shadow="always" style="width:70vw; border-radius: 35px 35px 35px 35px; margin-left:2vw;">
          <h2 style="float:left; height: 8vh; margin-right:30px;">期刊筛选</h2>
          <el-input
            v-model="searchWord"
            placeholder="请输入感兴趣的期刊名/会议名"
            style="float:left; height:8vh; width: 50vw; margin: 0 auto;"
            input-style="height: 8vh;border-radius: 1.5vw;"
            @keyup.enter="journalSearch"
          />
        </el-card>
        <!-- <div v-for="(journal, index) in journalList" :key="index" style="float:left; margin-left:30px;" @click="journalSearch(journal.name)">
          <h5 style="text-align:center;" v-html="journal.name"></h5>
          
        </div> -->
        <el-table :data="journalList" height="400" style="width: 300; margin:20px 0 0 12vw;" @row-click="showJournalResult">
          <el-table-column type=index prop="index" label="次序" width="100" />
          <el-table-column prop="DisplayName" label="期刊名/会议名" width="500" />
          <el-table-column prop="NormalizedName" label="标准名称" width="400" />
        </el-table>
        <div v-if="totalNum!=-1" style="width:100%; text-align:center; margin:20px 0 10px 0;"><el-icon><files /></el-icon> 共{{ totalNum }}条</div>
    </el-card>
  </div>
</template>

<script>
import NavigatorMenu from "../components/NavigatorMenu";
import axios from "axios";
import router from "../router";

export default {
  name: "JournalList",
  components: {
    NavigatorMenu
  },
  data() {
    return {
      searchWord: '',
      journalList: [],
      totalNum: -1,
    }
  },
  created() {
    axios({
      method: 'get',
      url: '/api/venue/get-all-venue/',
      params: {
        page:1,
        size:1000,
      }
    }).then(response => {
      if (response.data.code == 200) {
        console.log('期刊搜索结果')
        console.log(response.data.data)
        this.journalList = response.data.data
        this.totalNum = 65371
      }
      else {
        console.log(response.msg)
        this.$message({
          message: '抱歉，没有符合条件的期刊/会议',
          type: 'warning'
        })
      }
    })
  },
  mounted() {
  },
  methods: {
    journalSearch() {
      const venueName = {
        name: this.searchWord,
        page: 1,
        size: 1000,
      }
      console.log('期刊搜索参数')
      console.log(venueName)
      axios({
        method: 'post',
        url: '/api/venue/get-venue-by-name/',
        data: venueName
      }).then(response => {
        if (response.data.code == 200) {
          this.journalList = response.data.data.jsonArray
          this.totalNum = response.data.data.total
          if(this.journalList.length==0){
            this.totalNum=0
          }
          console.log('期刊搜索接结果')
          console.log(this.journalList)
        }
        else {
          this.totalNum = 0
          console.log(response.msg)
          this.$message({
            message: '抱歉，没有符合条件的期刊/会议',
            type: 'warning'
          })
        }
      })
    },
    showJournalResult(row, column, event) {
      const Parameters = {
        condition: {
          key: 'venue.id.keyword',
          option: 0,
          page: 1,
          size: 20,
          value: row.id
        },
        paperFilter:{
          canGet: false,
          highSite: false,
          hot: false,
        },
        sort:1,
        year:{
          l:1950,
          r:2021,
        }
      }
      router.push(
      {
        path: '/searchResult',
        name: 'SearchResult',
        params: {
          fromJournal: true,
          Parameters: JSON.stringify(Parameters),
          journalName: row.DisplayName
        }
      })
      console.log('Parameters')
      console.log(Parameters)
    }
  }
}
</script>

<style scoped>

</style>